<template>
  <div>
    <h2>ModelForm组件</h2>
    <VModelForm ref="formRef" :formData="formValue" :fields="addModelFormFields" />
    <VModelForm
      :formData="formValue"
      :fields="searchFields"
      layout="inline"
      @search="search"
    />
    <AButton @click="submit">提交</AButton>
  </div>
</template>

<script>
import { addModelFormFields, searchFields } from "./config";

export default {
  data() {
    return {
      formValue: {
        name: "",
        sex: "",
      },
      addModelFormFields,
      searchFields,
    };
  },
  mounted() {
    const obj = this.searchFields.find((x) => x.key === "age");
    if (obj && obj.on) {
      obj.on.change = (val) => this.selectChange(val);
    }
  },
  methods: {
    async submit() {
      const res = await this.$refs.formRef.onSubmit();
      console.log(res, "res---");
    },
    selectChange(val) {
      console.log(val, "val");
      if (val === 2) {
        this.searchFields.find((x) => x.key === "address").show = false;
      } else {
        this.searchFields.find((x) => x.key === "address").show = true;
      }
    },
    search(query) {
      console.log(query);
    },
  },
};
</script>

<style></style>
